<!--
 * @Descripttion: 首页
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2024-05-06
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2024-05-07
-->
<script lang="ts" setup>
  import { CommonImgEnum } from '/@/enums/img/sysEnum'
</script>

<template>
  <div class="home">
    <div class="header">
      <img class="header-bg" :src="CommonImgEnum.home.HEADER_BG" />
      <p class="header-title">Hi，欢迎您使用数字银行管理后台！</p>
      <p class="header-text">轻松创建、发布和管理您的数字身份。</p>
    </div>
    <div class="content">
      <img class="content-box" :src="CommonImgEnum.home.WORKBENCH_BG" />
      <p class="content-title">工作台即将开放，敬请期待</p>
      <p class="content-text">如无菜单权限，请联系机构管理员协助开通</p>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .home {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .header {
    position: relative;
    height: 120px;

    .header-bg {
      width: 100%;
      height: 100%;
    }

    .header-title {
      position: absolute;
      top: 20px;
      left: 32px;
      line-height: 43px;
      font-size: 28px;
      color: #fff;
    }

    .header-text {
      position: absolute;
      top: 70px;
      left: 32px;
      line-height: 29px;
      font-size: 16px;
      color: #fff;
    }
  }

  .content {
    flex: 1;
    margin-top: 21px;
    padding-top: 60px;
    background: #fff;

    .content-box {
      display: block;
      width: 448px;
      height: 326px;
      margin: auto;
    }

    .content-title {
      margin-top: 32px;
      text-align: center;
      line-height: 32px;
      font-size: 18px;
      font-weight: bold;
      color: #1d2129;
    }

    .content-text {
      margin-top: 11px;
      text-align: center;
      line-height: 29px;
      font-size: 16px;
      color: #86909c;
    }
  }
</style>
